<!doctype html>
<style>
.o { font-style: oblique -15deg; }

.s {
    transform: skew(0deg, -15deg);
    writing-mode: vertical-rl;
}

.u { text-orientation: upright; }

.v { writing-mode: vertical-rl; }

table {
  font-size: 30px;
  margin: 10px;
}

td {
  border: solid 1px red;
  padding: 5px;
}
</style>
<table lang="ja"><tr>
<td>
<div style="writing-mode: vertical-rl">
<div class="v o" id="target">これは斜体です。■□</div>
<div class="v">これは直体です。■□</div>
<div class="v o">oblique</div>
<div class="v">normal.</div>
<div class="v o u">upright+oblique</div>
<div class="v u">upright.</div>
</div>
</td>
<td>
<div xstyle="writing-mode: vertical-rl">
<span class="s">これは斜体です。■□ CSS</span>
</div>
</td>
</tr></table>
<script>
const selection = window.getSelection();
selection.collapse(target.firstChild, 1);
selection.extend(target.firstChild, 3);
</script>
